<template>
    <div class="a">
        <div class="b">
            <a href="#">suoyue’s blog</a>
            <h2>缩月的个人博客</h2>
            <div>
                Hang on to your dream!
            </div>
        </div>
        <div class="c">
            <!-- --i是用来计算平面圆柱的动效延迟和距离的
            --w则是用来计算平面圆柱的宽度 -->
            <div class="d" style="--i: 1; --w: 1.5"></div>
            <div class="d" style="--i: 2; --w: 1.6"></div>
            <div class="d" style="--i: 3; --w: 1.4"></div>
            <div class="d" style="--i: 4; --w: 1.7"></div>
            <div class="e" style="--i: 1"></div>
        </div>
        <!-- 设置二维码 -->
        <div class="f"></div>

        <p>hover me</p>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'MyIntroductionCard',
    props: {
        msg: String,
    },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>



.a {
  position: relative;
  width: 700px;
  height: 400px;
  border: #fff 10px solid;
  background-color: rgb(120, 140, 200);
  border-radius: 20px;
  overflow: hidden;
}

.b {
  position: absolute;
  width: 200px;
  height: 300px;
  left: 0;
  margin: 75px 50px;
  transition: 1s;
}

.b a {
  text-decoration: none;
  color: rgb(90,220,150);
  font: 900 28px "";
}

.b h2 {
  /* 鼠标放开时的动画，第一个值是动画的过渡时间
            第二个值是延迟一秒后执行动画 */
  transition: 0.5s 1s;
  opacity: 0;
  color: rgb(30, 210, 200);
}

.b div {
  transition: 0.5s 1s;
  color: #fff;
  font: 500 15px "";
  position: relative;
  top:20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 24px;
}

.c {
  position: absolute;
  top: -130px;
  right: -240px;
}

.d,
.e {
  position: absolute;
  right: calc(var(--i) * 100px);
  width: calc(var(--w) * 40px);
  height: 500px;
  overflow: hidden;
  border-radius: 100px;
  transform: rotateZ(220deg) translate(0, 0);
  background: rgb(240, 220, 150);
  transition: 0.5s 0.5s;
}

.d:nth-child(2) {
  background: rgb(240, 190, 230);
}

.e {
  left: -470px;
  top: -140px;
  width: 70px;
  background-color: rgb(90, 220, 150);
}

.a:hover .c div {
  /* 设置延迟动画 */
  transition: 0.5s calc(var(--i) * 0.1s);
  /* 移动的轨迹 */
  transform: rotateZ(220deg) translate(-200px, 400px);
}

.a:hover .b {
  transition: 1s 0.5s;
  left: 370px;
}

.a:hover .b span {
  transition: 1s 0.5s;
  top: 105px;
}

.a:hover .b h2 {
  transition: 1s 0.5s;
  opacity: 1;
}

.f {
  width: 250px;
  height: 250px;
  position: absolute;
  background-image: url("~@/assets/logo.png");
  background-size: cover;
  margin: 70px ;
  
  opacity: 0;
  transition: 0.5s;
}

.a:hover .f {
  transition: 1s 1.3s;
  opacity: 1;
}

.a p {
  background: transparent;
  color: #000000;
  animation: 2s blink-alternate infinite;
  animation-direction: alternate-reverse;
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

@keyframes blink-alternate {
  50% {
    color: black;
  }

  100% {
    color: transparent;
  }
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(-25deg);
  }

  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }

  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}
</style>